import React, { Component } from 'react';
import autoBind from 'react-autobind';
import moment from 'moment'; 
import { Link, browserHistory } from 'dva/router';
import { Tabs, List, Button } from 'antd-mobile';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

class OrdersBodyItem extends Component {
	constructor(props) {
        super(props)
        autoBind(this)
    }

    onNavPay(e) {
    	const { order } = this.props

    	browserHistory.push(`/cashier?orderSn=${order.orderSn}&orderAmount=${order.orderAmount}`)

    	e.stopPropagation()
    	return false
    }
	render() {
		const { order, orderStatus } = this.props

	 	return (
	 		<List.Item extra={null} className={styles['orders-body-item']} onClick={() => browserHistory.push(`/order/detail/${order.orderId}`) }>
	        	<div className={styles['orders-body-item-title']}>
	        		<span className={styles['orders-body-item-subtitle']}>订单号：{order.orderSn}</span>
	        	</div>
	        	<div className={styles['orders-body-item-body']}>
	        		{
	        			order.goodsList.map((good, ii) => {
	        				return (<div key={ii} className={styles['orders-body-item-body-item']}>
				        		<img style={{width: '1.20rem', height: '1.20rem'}} className={styles['order-body-item-body-img']} src={good.goodsThumb} />
				        		<div className={styles['orders-body-item-body-right']}>
				        			<div className={styles['orders-body-item-body-right-item']}>
				        				<span className={styles['orders-body-item-body-right-title']}>{good.goodsName}</span>
				        			</div>
				        			<div className={styles['orders-body-item-body-right-item']}>
				        				<span className={styles['orders-body-item-body-des']}>{good.goodsAttrs}</span>
				        			</div>
					        		<div className={styles['orders-body-item-body-right-item']}>
					        			<span className="meyley-price"><span style={{fontSize: '0.28rem'}}>￥{good.goodsPrice}</span></span>
				        			</div>
				        		</div>
			        		</div>)
	        			})
	        		}
	        	</div> 
	        	<div className={styles['orders-body-item-controller']}>
	        		<span style={{fontSize: '0.24rem', color: 'rgb(149, 149,149)'}}>{moment(order.addTime).format('YYYY/MM/DD HH:mm')}</span>
	        		{
	        			orderStatus === 0 ? (<Button 
						        				inline 
						        				onClick={this.onNavPay}
						        				className={`${styles['orders-body-item-button']} meyley-button`} 
						        				style={{float: 'right', color: '#FF003D'}}
						        			>去支付</Button>) : null
	        		}
	        		{
	        			orderStatus === 1 ? (<Button inline className={`${styles['orders-body-item-button']} meyley-button`} style={{float: 'right', color: '#FF003D'}}>查看订单</Button>) : null
	        		}
	        		{
	        			orderStatus === 2 ? (<Button inline className={`${styles['orders-body-item-button']} meyley-button`} style={{float: 'right', color: '#FF003D'}}>查看订单</Button>) : null
	        		}
	        		
	        	</div>
	        </List.Item>
	  	);
	}
};

OrdersBodyItem.propTypes = {
};

export default OrdersBodyItem
